<template>
  <div class="home">
    <!-- 头部日历 -->
    <van-calendar
      :formatter="formatter"
      :poppable="false"
      :show-confirm="false"
      :style="{ height: '150px' }"
      :show-mark="false"
      :show-title="false"
      color="#f15a24;"
      @select="select"
    />
    <!-- 今日课程 -->
    <div class="box">
      <div class="top">
        <div class="l">
          <p>今日课程( <span>0</span> 节)</p>
        </div>
        <div class="r" @click="$router.push('/mykkec')">
          <img
            src=""
            alt=""
          />
          <p>课表</p>
        </div>
      </div>
      <div class="top" v-show="showwen" style="margin-top: 10px">
        <div
          class="l"
          style="
            font-size: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 70%;
          "
        >
          <p>23老吕半年/暑期面授集训...</p>
        </div>
        <div class="r">
          <p style="color: orangered; font-size: 25px">19:00</p>
        </div>
      </div>
      <div class="bottom">
        <div class="l" @click="$router.push('/xuexijilu')">
          <img
            src="https://wap.lexuemiao.com/img/history-full@3x.fd48535a.png"
            alt=""
          />
          <p>学习记录</p>
        </div>
        <div class="r" @click="$router.push('/xuexiziliao')">
          <img
            src="https://wap.lexuemiao.com/img/ziliao@3x.6d7c3da4.png"
            alt=""
          />
          <p>学习资料</p>
        </div>
      </div>
    </div>
    <!-- 正在学习的课程 -->
    <div class="content">
      <div class="top">
        <div class="title">正在学习的课程</div>
        <span @click="$router.push('/allKe')">查看更多 ></span>
      </div>
      <ul>
        <li
          @click="todetail(item.id)"
          v-for="(item, index) in list"
          :key="index"
        >
          <span class="title">{{ item.course_classify_title }}</span>
          <p class="desc">{{ item.title }}</p>
          <div class="box">
            <span>系统课</span>
            <span>{{ item.course_count }}课时</span>
          </div>
          <p class="date">
            课程有效期{{ new Date(item.course_validity_date).toLocaleString() }}
          </p>
          <div class="jn">
            <div class="a" v-for="(ite, ind) in item.course_label" :key="ind">
              {{ ite.label_name }}
            </div>
          </div>
          <div class="info">
            <div
              class="box"
              v-for="(it, i) in item.teacher.slice(0, 3)"
              :key="i"
            >
              <img :src="it.avatar" alt="" />
              <span style="background-color: #fff">{{ it.teacher_name }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue'
import { getmyCourseApi, zhengzaixuexiApi } from '../http/api.js'
export default {
  setup(props) {
    const data = reactive({
      date: [],
      show: true,
      showwen: false,
      time17: [],
      list: []
    })

    onMounted(() => {
      get17time()
      Getzhengzaixuexi()
    })
    const formatter = (day) => {
      let a = new Date().toLocaleString()
      let b = Number(a.replace(' ', '/').split('/')[2])
      // console.log('timer', a, b)
      const month = day.date.getMonth() + 1
      const date = day.date.getDate()
      // select(date)
      // console.log('data', date)
      if (month === 6) {
        if (date === 1) {
          day.topInfo = '儿童节'
        } else if (date === b) {
          day.text = '今天'
        } else if (date === 17) {
          day.text = '17 .'
        }
      }
      return day
    }
    // 点击任意日期时触发
    const select = (date) => {
      console.log(
        '111',
        new Date(date).toLocaleString().replace(' ', '/').split('/')[2]
      )
      let a = Number(
        new Date(date).toLocaleString().replace(' ', '/').split('/')[2]
      )
      if (a == 17) {
        data.showwen = true
      } else {
        data.showwen = false
      }
    }
    // 17日time
    const get17time = async () => {
      const res = await getmyCourseApi()
      console.log('17日', res)
    }
    const Getzhengzaixuexi = async () => {
      const res = await zhengzaixuexiApi()
      console.log('正在学习的课程', res)
      data.list = res
    }
    return {
      ...toRefs(data),
      formatter,
      select
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .van-calendar {
    .van-calendar__header-subtitle {
      font-size: 25px;
    }
  }
  .box {
    margin-top: 20px;
    .top {
      background-color: #f5f6f8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 86%;
      margin: auto;
      padding: 10px 20px;
      box-sizing: border-box;
      .l {
        font-size: 20px;
        span {
          color: red;
        }
      }
      .r {
        text-align: center;
        img {
          width: 40px;
          height: 50px;
        }
        p {
          font-size: 12px;
          color: #a0a7b8;
        }
      }
    }
    .bottom {
      width: 86%;
      margin: auto;
      display: flex;
      justify-content: space-around;
      padding: 40px 0;
      .l {
        text-align: center;
        img {
          width: 100px;
        }
        p {
          font-size: 15px;
          color: #60657a;
          font-weight: 500;
        }
      }
      .r {
        text-align: center;
        img {
          width: 100px;
        }
        p {
          font-size: 14px;
          color: #60657a;
          font-weight: 500;
        }
      }
    }
  }
  .content {
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      .title {
        font-weight: 600;
        color: #424963;
        font-size: 20px;
        // margin-top: 40px;
      }
      span {
        color: #ccc;
        font-size: 14px;
      }
    }
    ul {
      padding: 20px;
      li {
        min-height: 300px;
        border-radius: 20px;
        background-color: #fff;
        margin: 20px;
        padding: 10px 30px;
        box-shadow: 0 0 5px 5px #f1f1f1;
        .title {
          background-color: #f15a24;
          color: #fff;
          padding: 6px 20px;
          font-size: 14px;
          border-radius: 20px 0 20px 0;
          margin-left: -28px;
        }
        .desc {
          margin-top: 20px;
          font-size: 15px;
        }
        .box {
          span {
            font-size: 12px;
            margin-right: 10px;
            background-color: #eee;
            padding: 8px 10px;
            color: #666;
          }
        }
        .date {
          margin: 20px 0;
          padding: 0;
          font-size: 12px;
        }
        .jn {
          margin-top: 20px;
          display: flex;
          .a {
            font-size: 12px;
            background-color: #f5f6f8;
            color: #666;
            padding: 5px 10px;
            margin-right: 10px;
          }
        }
        .info {
          display: flex;
          .box {
            display: flex;
            align-items: center;
            img {
              width: 60px;
              height: 60px;
              border-radius: 50%;
              margin-right: 10px;
            }
            span {
              color: #666;
              font-size: 13px;
              margin-right: 20px;
            }
          }
        }
        .bottom {
          font-size: 14px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          s {
            color: #ccc;
            margin-right: 10px;
            font-size: 14px;
          }
          b {
            color: red;
            font-size: 14px;
          }
          .mianfei {
            color: green;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
